<template>
  <div class="footer">
    <el-container>
      <el-footer class="foot">
        <div class="foot-content">
          <div class="foot-top">
            <dl class="left" v-for="(item, idx) in footList" :key="idx">
              <dt>{{ item.title }}</dt>
              <dd v-for="(msg, ix) in item.kind" :key="ix">
                <a :href="msg.href">
                  {{ msg.title1 }}
                </a>
              </dd>
            </dl>
            <dl class="center">
              <dt>联系BOOS直聘</dt>
              <dd>北京华品博睿网络技术有限公司</dd>
              <dd>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</dd>
              <dd>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</dd>
            </dl>
            <dl class="right">
              <dt>BOSS直聘</dt>
              <dd>企业服务热线和推荐算法/未成年人等举报渠道 400 065 5799</dd>
              <dd>老年人直连热线400 661 6030</dd>
              <dd>工作日 8:00 - 22:00</dd>
              <dd>休息日 9:30 - 18:30</dd>
            </dl>
          </div>
          <div class="foot-center">
            <ul class="left">
              <li>Copyright &copy; 2022 BOSS直聘</li>
              <li>
                <a href="https://beian.miit.gov.cn/#/Integrated/index"
                  >京ICP备14013441号-5</a
                >
              </li>
              <li>京ICP证150923号</li>
              <li>京网文[2020]0399-066 号</li>
              <li>
                <img
                  src="https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png"
                />电子营业执照
              </li>
              <li>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo"
                  ><img
                    src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png"
                  />京公网安备11010502032801</a
                >
              </li>
              <li>朝阳网警</li>
              <li>人力资源服务许可证</li>
              <li>网上有害信息举报专区</li>
              <li>朝阳区人社局监督电话</li>
            </ul>
            <div class="right">
              <a href="/"><img src="" alt="" /></a>
              <a href="/"><img src="" alt="" /></a>
              <a href="/"><img src="" alt="" /></a>
              <a href="/"><img src="" alt="" /></a>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
    <el-collapse class="foot-bottom" style="border: 0">
      <div class="fb-content">
        <el-collapse-item class="downList">
          <template slot="title">
            友情链接：
            <a v-for="(ms, ic) in bottomList" :key="ic" href="">{{
              ms.title2
            }}</a>
            
          </template>
          <div>
            <a v-for="(mse, id) in bottomList" :key="id" href="">{{
              mse.title1
            }}</a>
          </div>
         
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>
<script>
import { getFootData, getFootList } from "@/api";

export default {
  name: "Footer",
  data() {
    return {
      footList: [],
      bottomList: [],
    };
  },
  created() {
    getFootData().then((res) => {
      this.footList = res.data;
    });
    getFootList().then((res) => {
      this.bottomList = res.data;
    });
  },
};
</script>
<style lang="less">
.footer {
  .foot {
    background: #202329;
    min-height: 200px;
    .foot-content {
      display: flex;
      flex-direction: column;
      width: 1184px;
      margin: 0 auto;
      .foot-top {
        display: flex;
        justify-content: space-between;
        .left {
          dt {
            font-size: 14px;
            color: #ffffffc0;
          }
          dd {
            margin: 10px 0 0 0;
            a {
              font-size: 12px !important;
              color: #ffffff80;
              &:hover {
                color: #00d7c6;
              }
            }
          }
        }
        .center {
          dt {
            font-size: 14px;
            color: #ffffffc0;
          }
          dd {
            margin: 10px 0 0 0;
            font-size: 12px !important;
            color: #ffffff80;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin: 20px 20px 20px 0px;
          dt {
            font-size: 14px;
            color: #ffffff80;
          }
          dd {
            margin: 10px 0 0 0;
            font-size: 12px !important;
            color: #ffffff80;
          }
        }
      }
      .foot-center {
        font-size: 12px !important;
        display: flex;
        .left {
          width: 890px;
          li {
            color: #ffffff80;
            float: left;
            margin-right: 20px;
            a {
              color: #ffffff80;
              &:hover {
                color: #00d7c6;
              }
            }
            img {
              display: inline;
              width: 16px;
              height: 16px;
            }
          }
        }
        .right {
          width: 200px;
          height: 40px;
        }
      }
    }
  }
  .foot-bottom {
    background: #202329;
    .fb-content {
      width: 1184px;
      margin: 0 auto;
      .el-collapse-item__header {
        border: 0;
        background: #202329;
        height: 46px;
        color: #ffffff80;
        a {
          color: #ffffff80;
          margin: 0 10px;
          &:hover {
            text-decoration: underline;
            color: #00d7c6;
          }
        }
      }
      .el-collapse-item__content {
        padding: 0;
        border: 0;
        background: #202329;
        line-height: 46px;
        color: #ffffff80;
        a {
          color: #ffffff80;
          margin: 0 10px;
          &:hover {
            text-decoration: underline;
            color: #00d7c6;
          }
        }
      }
    }
  }
}
</style>